<template>
    <div class="media-attr">
        <div class="thumb-list">
            <div v-for="(item, index) in currentElementVideoList" :key="index" class="single-thumb">
                <div class="handle-wrap">
                    <i class="el-icon-edit" v-show="!item.id" @click="editCustom(item, index)"></i>
                </div>
                <img :src="item.id ? getPreview(item.preview) : defaultThumb" alt="" />
            </div>
        </div>
        <div class="custom-resource" v-show="customVisible">
            <textarea :rows="5" placeholder="请输入自定义资源地址" :id="video.getCustomVideoName()"></textarea>
            <div class="button-wrap custom-button-wrap">
                <el-button type="primary" @click="cancelCustomVideo">取 消</el-button>
                <el-button type="primary" @click="addCustomVideo(customType)">添 加</el-button>
            </div>
        </div>
        <div class="button-wrap">
            <el-button type="primary" @click="getVideoList()">资源库</el-button>
            <FileUpload fileType="02" componentType="upload" buttonStyle="button" />
            <el-button type="primary" @click="customUrlEvent(customType)">自定义</el-button>
        </div>
        <el-drawer v-if="repository" :visible.sync="repository" title="资源库" size="350px" @close="dialogClose">
            <div class="resource-wrap" :id="window.getRootName() + 'RESOURCE_VIDEO_WRAP'">
                <ul v-show="currentElementList[0].component === 'Video'">
                    <li v-for="(item, index) in videoList" :class="{ 'select-resource' : selectVideoIndex.indexOf(item.id) > -1 }" :key="'video_' + index" @click="selectVideo(item, index)">
                        <img class="video-resource" :src="getImgUrl(item, index)" alt="" />
                    </li>
                </ul>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import FileUpload from '@/view/component/FileUpload.vue';
import store from '@/js/store/state.js';
import config from '@/js/util/config.js';
import template from '@/js/element/template.js';
import tree from '@/js/main/tree.js';
import video from '@/js/main/attribute/video.js';
import util from '@/js/util/util.js';
import system from '@/js/main/system.js';
import JQuery from 'jquery';
import register from '@/js/main/register.js';
import loadingImg from '@/image/main/toolbar/toolbar_loading.svg';
import history from '@/js/main/history.js';

export default {
    data() {
        return {
            currentElementVideoList: [],
            currentElementList: store.getCurrentElementList(),
            menuData: tree,
            video: video,
            repository: false,
            videoList: [],
            selectVideoIndex: [],
            customVisible: false,
            editCustomIndex: -1,
            customType: 'new',
            defaultThumb: 'src/image/main/video.svg',
            showImgLineNum: 0,
            recorScrolldNum: 24,
            window: window,
            defaultImg: 'src/image/main/toolbar/toolbar_loading.svg'
        };
    },
    mounted() {
        let data = util.clone(this.currentElementList[0].data);
        for (let i = 0; i < data.length; i++) {
            this.currentElementVideoList.splice(i, 0, data[i]);
        }
        this.setSelectIndex(this.currentElementList);
    },
    watch: {
        currentElementList: {
            handler() {
                let data = util.clone(this.currentElementList[0].data);
                this.currentElementVideoList = data;
                this.setSelectIndex(this.currentElementList);
            },
            deep: true
        }
    },
    methods: {
        dialogClose() {
            this.scrollListener(false);
        },
        getImgUrl(row, index) {
            if (index <= this.recorScrolldNum) {
                return row.icon;
            } else {
                return loadingImg;
            }
        },
        clearCustomUrl() {
            JQuery('#' + video.getCustomVideoName()).val('');
        },
        customUrlEvent() {
            this.customVisible = true;
            this.customType = 'new';
        },
        editCustom(item, index) {
            this.customVisible = true;
            this.customType = 'edit';
            this.editCustomIndex = index;
            JQuery('#' + video.getCustomVideoName()).val(item.url);
        },
        cancelCustomVideo() {
            this.clearCustomUrl();
            this.customVisible = false;
        },
        videoLoad(url) {
            return new Promise(function(resolve) {
                let video = document.createElement('video');
                video.src = url;
                video.addEventListener(
                    'loadedmetadata',
                    function() {
                        let width = this.videoWidth;
                        let height = this.videoHeight;
                        resolve({
                            height: height,
                            width: width
                        });
                    },
                    false
                );
            });
        },
        addCustomVideo() {
            this.customVisible = false;
            let url = JQuery('#' + video.getCustomVideoName()).val();
            this.videoLoad(url).then((res) => {
                let customVideo = {
                    width: res.width,
                    height: res.height,
                    url: url
                };
                this.currentElementList[0].data.splice(0, 1);
                this.currentElementList[0].data.splice(this.currentElementList[0].data.length, 0, customVideo);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[0].id}`, customVideo);
                this.clearCustomUrl();
                history.addHistory(store.clone(), 47);
            });
        },
        setSelectIndex(elementList) {
            this.selectVideoIndex = [];
            for (let i = 0; i < elementList[0].data.length; i++) {
                if (elementList[0].component === 'Video') {
                    this.selectVideoIndex.splice(this.selectVideoIndex.length, 0, elementList[0].data[i].id);
                }
            }
        },
        selectVideo(item) {
            let selectVideoElement = template.baseElementMap[item.id];
            this.currentElementList[0].data.splice(0, 1);
            this.selectVideoIndex.splice(0, 1);
            this.currentElementList[0].data.splice(this.currentElementList[0].data.length, 0, util.clone(selectVideoElement.data[0]));
            this.selectVideoIndex.splice(this.selectVideoIndex.length, 0, item.id);
            register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[0].id}`, selectVideoElement);
        },
        getPreview(url) {
            return url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${url}` : `src/image/main/toolbar/logo.svg`;
        },
        getVideoList() {
            let _this = this;
            this.repository = true;
            let resourcesNum = this.menuData[3].children[1].children.length;
            this.$nextTick(() => {
                let dom = document.getElementById(`${window.getRootName()}RESOURCE_VIDEO_WRAP`);
                this.videoList = this.menuData[3].children[1].children;
                this.recorScrolldNum = Math.ceil(dom.clientHeight / 90) * 2 + 6;
                this.scrollListener();
            });
        },
        scrollListener(type = true) {
            let _this = this;
            let dom = document.getElementById(`${window.getRootName()}RESOURCE_VIDEO_WRAP`);
            if (type) {
                dom.addEventListener('scroll', _this.elementScroll);
            } else {
                dom.removeEventListener('scroll', _this.elementScroll);
            }
        },
        elementScroll: util.debounce(function($event) {
            let height = Math.ceil(($event.target.scrollTop + $event.target.clientHeight) / 90);
            if (this.recorScrolldNum > height * 2) return;
            this.recorScrolldNum = height * 2;
        })
    },
    components: {
        FileUpload
    }
};
</script>

<style scoped lang="scss">
$BtnBackCol: #c06a6a0f;
$BtnHoverBackCol: #ffffff33;
.thumb-list {
    margin-top: 20px;
    width: 100%;
    .single-thumb {
        width: 100%;
        height: 100px;
        border: 1px solid $BtnHoverBackCol;
        border-radius: 3px;
        margin: 10px 0;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-position: 50%;
            object-fit: contain;
        }
        .handle-wrap {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 10;
            font-size: 18px;
            color: $FontWhite;
            cursor: pointer;
            i {
                margin: 0 5px;
            }
        }
    }
}
.button-wrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    text-align: center;
}
.button-wrap ::v-deep.el-button--primary {
    width: 75px;
    background: $BtnBackCol !important;
    height: 30px;
    border: none;
    line-height: 8px !important;
    margin: 0 0.1rem;
    &:hover {
        background: $BtnHoverBackCol !important;
    }
}
.media-attr ::v-deep.el-drawer {
    background: #212121ff;
}
.media-attr ::v-deep.el-drawer__header {
    margin-bottom: 0;
    color: $FontWhite;
}
.resource-wrap {
    padding: 5px 15px;
    overflow-y: auto;
    width: 100%;
    height: calc(100vh - 70px);
    li {
        width: 45%;
        height: 80px;
        margin: 5px;
        float: left;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        border: 1px solid #39435d;
        cursor: pointer;
        border-radius: 2px;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-position: 50% 50%;
            object-fit: contain;
        }
    }
    .select-resource {
        border: 1px solid #f50;
    }
}
.custom-resource {
    .custom-img {
        height: 100px;
        background: #f50;
    }
    textarea {
        border: 1px solid $BorderColor;
        background: $BtnBackCol;
        padding: 5px;
        color: $FontWhite;
        width: 100%;
        border-radius: 3px;
    }
    .custom-button-wrap {
        display: flex;
        justify-content: space-between;
    }
}
</style>